<template>
	<view>
		<view class="flex-col page">
			<!-- 顶部标题组件 -->
			<view class="flex-col group">
				<view class="flex-col">
					<view class="flex-col section_2">
						<view class="flex-row group_2">
							<image :src="fieldList.thumb" class="image_1" />
							<text class="text_1">{{fieldList.salevenue_s}}</text>
						</view>

						<view class="justify-between group_3">
							<view class="flex-row" style="display: flex;">
								<image :src="fieldList.picture" class="image_2" />
								<view class="flex-col group_5">
									<text class="text_2">{{fieldList.fieldtype}}</text>
									<view class="flex-col" style="margin-top: 20rpx;">
										<view class="flex-col items-center text-wrapper">
											<text>{{fieldList.salesite}}</text>
										</view>
									</view>

									<view class="group_7">
										<text class="text_4">￥</text>
										<text class="text_5">{{amount}}</text>
										<!-- <text class="text_7">x1</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="justify-between group_8">
						<view v-for="(item,index) in 2">
							<view class="qne">
								<view class=" section_3">
									<text class="text_8">场地号--日期</text>
									<view class="flex-row group_8">
										<text>{{item.num}}:{{item.current_month}}</text>
									</view>
								</view>
								<view class="justify-between section_3">
									<text class="text_8">场地时间</text>
									<view class="flex-row group_8">
										<text>{{item.dateTimes}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="justify-between section_3">
						<text class="text_8">优惠券</text>
						<view class="flex-row group_8">
							<text>暂无优惠券</text>
							<image :src="img4" class="image_3 image_4" />
						</view>
					</view>
					<view class="justify-between section_4">
						<text class="text_10">充值卡</text>
					</view>

				</view>
			</view>
			<view class="payAmount">
				<view class="amountMoney">合计：<text>¥{{amount}}</text></view>
				<u-button type="primary" shape="circle" :plain="true" hover-class="none" :custom-style="toPayStyle_no"
					v-if="checkboxState == false">去支付 </u-button>
				<u-button type="primary" shape="circle" :plain="true" hover-class="none" :custom-style="toPayStyle"
					v-if="checkboxState == true" @click="changdizhifu">去支付</u-button>
			</view>
			<view class="yue">
				<view class="dui">
					<u-icon name="checkmark-circle" color="#909399" size="20" v-if="checkboxState == false"
						@click="updateCheckboxStateOn"></u-icon>
					<u-icon name="checkmark-circle-fill" color="#2979ff" size="20" v-if="checkboxState == true"
						@click="updateCheckboxState"></u-icon>
				</view>
				<view class="du">
					我已阅读
				</view>
				<view class="tu" @click="buyInfo">
					《购买须知》
				</view>
			</view>
			<u-popup v-model="show" mode="bottom">
				<view class="notes-buy">
					<view class="notes-content">
						{{classList.content}}
					</view>
				</view>
			</u-popup>
		</view>

		<template>
			<view>
				<u-action-sheet v-model="show1" @close="show1 = false" :list="actions3" @click="selectClick">
				</u-action-sheet>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1:false,
				toPayStyle: {
					'backgroundImage': 'linear-gradient(#0E9698 ,#0E9698 )',
					'color': '#fff !important'
				},
				toPayStyle_no: {
					'color': '#fff !important',
					'backgroundColor': '#cfcfcf !important'

				},
				checkboxState: true,
				aa: false,
				list: [],
				show: false,
				tickectId: '', // 票id 
				tickectList: [], // 数据 票
				cardList: [], // 数据 卡
				classList: [], //数据 培训班
				fieldList: [], // 数据 场地
				pageShow: false,
				amount: '100', // 场地 总金额
				actions3: [{
						text: '充值1',
						index: "2000",
					},
					{
						text: '充值2',
					},
					{
						text: '充值3',
					},
				],
			};
		},
		onLoad(options) {

		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.not-logged-in {
		width: 619rpx;
		height: 508rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999999;
		border-radius: 10rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			padding-top: 43rpx;
		}

		.close {
			color: #AAAAAAFF;
			font-size: 40rpx;
			font-weight: bold;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}

		/deep/ .u-image {
			margin: auto;
			margin-top: 52rpx;
		}

		.desc {
			font-size: 30rpx;
			color: #000000;
			font-weight: bold;
			text-align: center;
			margin-top: 20rpx;
		}

		.desc2 {
			color: #ADADADFF;
			font-size: 26rpx;
			text-align: center;
			margin-top: 18rpx;
		}

		.btns {
			display: flex;

			.btn {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #20B716FF;
				border-top: 1px solid #E6E6E6FF;
			}

			.btn2 {
				width: 50%;
				height: 100rpx;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				color: #000;
				border-top: 1px solid #E6E6E6FF;
			}
		}
	}

	.notes-buy {
		height: auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding-bottom: 40rpx;

		.notes-t {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			padding-top: 30rpx;
			padding-left: 30rpx;
		}

		.notes-content {
			display: flex;
			margin-left: 30rpx;
			margin-top: 34rpx;
			margin-bottom: 29rpx;

			.con-t {
				font-size: 26rpx;
				font-weight: 500;
				color: #BEBEBE;
				margin-right: 94rpx;
			}

			.con-c {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.payAmount {
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		position: fixed;
		left: 5rpx;
		bottom: 0;
		width: 760rpx;
		height: 120rpx;

		.amountMoney {
			color: #333333FF;
			font-size: 26rpx;
			font-weight: bold;
			margin-right: 80rpx;
			padding-left: 45rpx;
			top: 100rpx;

			text {
				color: red;
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(255, 65, 5);
			}
		}


		// #ifdef MP-WEIXIN
		u-button {
			width: 225rpx;
			margin-right: 30rpx;
			margin-left: auto;
		}

		// #endif
		// #ifdef H5
		/deep/ .u-btn {
			width: 225rpx;
			margin-right: 30rpx;
		}

		// #endif
	}

	.page {
		background-color: rgb(243, 243, 243);
		height: 100%;
		width: 100%;
		overflow-y: auto;

		.section_1 {
			padding: 114rpx 30rpx 235rpx;
			color: rgb(255, 255, 255);
			font-size: 36rpx;
			font-weight: 500;
			line-height: 34rpx;
			white-space: nowrap;
			background-image: url('');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.image {
				width: 20rpx;
				height: 37rpx;
			}

			.text {
				margin-left: 25rpx;
			}
		}

		.group {
			margin-top: 25rpx;
			padding: 0 29rpx;

			.group_10 {
				margin-top: 693rpx;
				height: 22rpx;

				.image_6 {
					width: 20rpx;
					height: 20rpx;
				}

				.group_11 {
					line-height: 22rpx;
					white-space: nowrap;
					position: relative;

					.text_12 {
						color: rgb(153, 153, 153);
						font-size: 22rpx;
						font-weight: 500;
						line-height: 22rpx;
					}

					.text_13 {
						color: #0E9698;
						font-size: 22rpx;
						font-weight: 700;
						line-height: 22rpx;
					}
				}
			}

			.section_2 {
				display: flex;
				padding: 39rpx 23rpx 39rpx 29rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 16rpx;
				flex-direction: column;

				.group_2 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 700;
					line-height: 28rpx;
					white-space: nowrap;
					height: 35rpx;

					.image_1 {
						width: 28rpx;
						height: 27rpx;
					}

					.text_1 {
						margin-left: 20rpx;
					}
				}

				.group_3 {
					margin-top: -80rpx;

					.text_7 {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 700;
						line-height: 21rpx;
						white-space: nowrap;
						position: relative;
						left: 283rpx;
					}

					.image_2 {
						width: 156rpx;
						height: 156rpx;
						margin-top: 92rpx;
					}

					.group_5 {
						display: flex;
						flex-direction: column;
						margin-left: 31rpx;
						justify-content: space-evenly;
						margin-top: 30rpx;

						.group_7 {
							display: flex;

							line-height: 22rpx;
							white-space: nowrap;
							margin-top: auto;

							.text_4 {
								color: rgb(255, 65, 5);
								font-size: 24rpx;
								font-weight: 500;
								line-height: 19rpx;
							}

							.text_5 {
								color: rgb(255, 65, 5);
								font-size: 30rpx;
								font-weight: 700;
								line-height: 23rpx;
							}

							.text_6 {
								color: rgb(255, 65, 5);
								font-size: 24rpx;
								font-weight: 700;
								line-height: 19rpx;
							}
						}

						.text_2 {
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							font-weight: 500;
							line-height: 26rpx;
							white-space: nowrap;
							margin-top: 63rpx;
						}

						.text-wrapper {
							display: flex;
							color: rgb(153, 153, 153);
							font-size: 22rpx;
							font-weight: 500;
							line-height: 22rpx;
							white-space: nowrap;
							background-color: rgb(239, 239, 239);
							border-radius: 5rpx;
							width: 80rpx;
							height: 28rpx;
							justify-content: center;
						}
					}
				}
			}

			.section_3 {
				margin-top: 30rpx;
				padding: 39rpx 26rpx 41rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 16rpx;
				display: flex;

				.text_8 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 27rpx;
					white-space: nowrap;
				}

				.group_8 {
					margin-right: 3rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 27rpx;
					white-space: nowrap;
					margin-left: auto;

					.image_4 {
						margin-left: 20rpx;
					}
				}
			}

			.section_4 {
				margin-top: 30rpx;
				padding: 40rpx 27rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 16rpx;
				display: flex;

				.text_10 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 26rpx;
					white-space: nowrap;
				}

				.group_9 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 26rpx;
					white-space: nowrap;
					margin-left: auto;

					.image_5 {
						margin-left: 20rpx;
						margin-bottom: 3rpx;
					}
				}
			}

			.image_3 {
				width: 12rpx;
				height: 22rpx;
			}
		}

		.section_5 {
			margin-top: 19rpx;
			padding: 20rpx 28rpx;
			background-color: rgb(255, 255, 255);

			.group_12 {
				align-self: center;
				line-height: 28rpx;
				white-space: nowrap;
				height: 30rpx;

				.text_14 {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					font-weight: 700;
					line-height: 29rpx;
				}

				.text_15 {
					color: rgb(255, 65, 5);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 19rpx;
				}

				.text_16 {
					color: rgb(255, 65, 5);
					font-size: 36rpx;
					font-weight: 700;
					line-height: 27rpx;
				}

				.text_17 {
					color: rgb(255, 65, 5);
					font-size: 30rpx;
					font-weight: 700;
					line-height: 23rpx;
				}
			}

			.text-wrapper_1 {
				display: flex;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				font-weight: 700;
				line-height: 29rpx;
				white-space: nowrap;
				background-image: linear-gradient(0deg, #0E9698 0%, #0E9698 100%);
				border-radius: 40rpx;
				width: 240rpx;
				height: 80rpx;
			}
		}
	}

	.yue {
		display: flex;
		// margin-top: 690rpx;
		position: fixed;
		bottom: 70px;
		margin-left: 45rpx;
		font-size: 25rpx;

		.du {
			color: #b1b3b1;
			margin-left: 10rpx;
		}

		.tu {
			color: #4182fd;
			font-weight: bold;
		}
	}

	.w {
		display: flex;
		flex-direction: column;
		font-size: 25rpx;
		width: 220rpx;
		position: relative;
		left: 420rpx;
		top: 100rpx;

	}

	.w view {
		margin-right: 10rpx;
	}

	.ew {
		display: flex;
		width: 150rpx;
	}
</style>
